
<template>
  <div>
    <div v-for="(item,i) in items"
         :key="i"
         class="p-2">
      <div class="student-ability-item">
        <view class="d-flex task-ability-header">
          <div class="mr-auto pl-2 ">{{item.year}}·{{item.quarter}}季度</div>
          <div class="d-flex  justify-content-center mr-2 align-items-center" @click="open(item.abilitys)">

                <img :src="'ability-icon.png'|imgUrl" style="width:32px;height:32px"
                   alt="">
          </div>
        </view>
        <!-- <div class="p-2 task-ability-content">
          <div v-if="info.job === 0"
               class="grid">
            <div class="d-flex justify-content-center ability-item">

              <div>销售能力 : {{item.abilitys['XiaoShou'] || 0}}</div>
            </div>
            <div class="d-flex justify-content-center ability-item">

              <div>策划能力 : {{item.abilitys['CeHua'] || 0}}</div>

            </div>
            <div class="d-flex justify-content-center ability-item">

              <div>市场研究 : {{item.abilitys['ShiChang'] || 0}}</div>
            </div>
            <div class="d-flex justify-content-center ability-item">

              <div>管理能力 : {{item.abilitys['GuanLi'] || 0}}</div>
            </div>
            <div class="d-flex justify-content-center ability-item">

              <div>资源整合 : {{item.abilitys['ZiYuan'] || 0}}</div>
            </div>
          </div>

          <div v-if="info.job === 1"
               class="grid">
            <div class="d-flex justify-content-center ability-item">
              <div>团队人员管理 : {{item.abilitys['TuanDuiRenYuan'] || 0}} </div>
            </div>
            <div class="d-flex justify-content-center ability-item">
              <div>团队文化锻造 : {{item.abilitys['TuanDuiWenHua'] || 0}}</div>
            </div>
            <div class="d-flex justify-content-center ability-item">
              <div>基础业务精进 : {{item.abilitys['YeWuJiChu'] || 0}}</div>
            </div>
            <div class="d-flex justify-content-center ability-item">
              <div>技术工艺创新 : {{item.abilitys['YeWuChuangXin'] || 0}}</div>
            </div>
            <div class="d-flex justify-content-center ability-item">
              <div>外部资源整合 : {{item.abilitys['ZiYuanDuiWai'] || 0}}</div>
            </div>
            <div class="d-flex justify-content-center ability-item">
              <div>内部资源协调 : {{item.abilitys['ZiYuanDuiNei'] || 0}}</div>
            </div>
          </div>
        </div> -->
        <div class="p-2">
          <div class="d-flex justify-content-around task-quarter-content p-2 text-center">
            <div style="width:33%">
              <h1 class="text-center pb-1"
                  style="color:#E02020">{{item.completeNum}}</h1>
              <div>已完成</div>
            </div>
            <div class="border-left"
                 style="width:33%">
              <h1 class="text-center pb-1">{{item.unCompleteNum}}</h1>
              <div>未完成</div>
            </div>
            <div class="border-left"
                 style="width:33%">
              <h1 class="text-center pb-1">{{item.otherNum}}</h1>
              <div>其他</div>
            </div>
          </div>
        </div>
        <view class="d-flex justify-content-around align-items-center pb-2 mr-2 ml-2 task-quarter-footer">
          <div class="d-flex ">
            <span class="pr-1">徒弟</span>
            <van-rate :value="item.studentRate"
                      readonly
                      size="12" />
            <span class="pr-1 pl-1">师傅</span>
            <van-rate :value="item.teacherRate"
                      readonly
                      size="12" />
          </div>
          <div @click="toTasks(item.year,item.quarter)"
               class="border-button-default ml-auto d-flex align-items-center justify-content-center">
            详情
          </div>
        </view>
      </div>
    </div>

    <div v-if="showAbility">
      <van-dialog use-slot
                  show="true"
                  @close="onCloseAbility"
                  className="vant-dialog-class"
                  catchtouchmove="preventTouchMove">
        <div class="ability-content-warpper ">
          <img :src="'dialog-bg.png'|imgUrl"
               alt="">
          <div class="ability-content">
            <h1 style="margin:16px 0; text-align:center;width:100%">学徒综合能力模型</h1>
            <view class="container">
              <ec-canvas id="mychart-dom-bar"
                         canvas-id="mychart-bar"
                         :ec="ec"></ec-canvas>
            </view>
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Hello extends Vue {
  public studentId;
  public info: any = null;
  public async created () {
    this.studentId = this.$mp.options['id']
    Megalo.setNavigationBarTitle({ title: this.$mp.options['name'] })
    this.info = await this.$http.get({
      url: 'studyTask/historyAbility/' + this.studentId
    })
    // this.info.items[1] = { 'abilitys': { 'YeWuJiChu': 10, 'XiaoShou': 22, 'TuanDuiWenHua': 33, 'TuanDuiRenYuan': 50, 'GuanLi': 44, 'YeWuChuangXin': 55, 'ZiYuanDuiNei': 44 }, 'year': 2019, 'quarter': 4 }
  }

  public get items () {
    return this.info ? this.info.items : null
  }

  public ec = {
    options: {}
  };

  public open (abilitys) {
    if (this.info.job === 0) {
      this.ec.options = {
        radar: {
          center: ['50%', '50%'],
          radius: '50%',
          name: {
            color: '#fff',
            fontSize: '13',
            rich: {} // 不加的话,字体大小有问题
          },
          indicator: [
            { name: '销售能力', max: 100 },
            { name: '策划能力', max: 100 },
            { name: '市场研究', max: 100 },
            { name: '管理能力', max: 100 },
            { name: '资源整合', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            areaStyle: { normal: {} },
            data: [
              {
                value: [
                  abilitys['XiaoShou'] || 0,
                  abilitys['CeHua'] || 0,
                  abilitys['ShiChang'] || 0,
                  abilitys['GuanLi'] || 0,
                  abilitys['ZiYuan'] || 0
                ]
              }
            ]
          }
        ]
      }
    } else if (this.info.job === 1) {
      this.ec.options = {
        radar: {
          center: ['50%', '50%'],
          radius: '50%',
          name: {
            color: '#fff',
            fontSize: '13',
            rich: {} // 不加的话,字体大小有问题
          },
          indicator: [
            { name: '团队人员管理', max: 100 },
            { name: '团队文化锻造', max: 100 },
            { name: '业务基础精进', max: 100 },
            { name: '技术工艺创新', max: 100 },
            { name: '外部资源整合', max: 100 },
            { name: '内部资源协调', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            areaStyle: { normal: {} },
            data: [
              {
                value: [
                  abilitys['TuanDuiRenYuan'] || 0,
                  abilitys['TuanDuiWenHua'] || 0,
                  abilitys['YeWuJiChu'] || 0,
                  abilitys['YeWuChuangXin'] || 0,
                  abilitys['ZiYuanDuiWai'] || 0,
                  abilitys['ZiYuanDuiNei'] || 0
                ]
              }
            ]
          }
        ]
      }
    }
    this.openAbility()
  }
  public showAbility = false;
  public openAbility () {
    this.showAbility = true
  }

  public onCloseAbility () {
    this.showAbility = false
  }

  public toTasks (year, quarter) {
    Megalo.navigateTo({
      url:
        '/admin/pages/tasks/index?year=' +
        year +
        '&quarter=' +
        quarter +
        '&id=' +
        this.studentId +
        '&quarterEndDays=' +
        0
    })
  }
}
</script>

<style lang="stylus" scoped>
.grid {
  display: grid;
  /* 设置列、行大小 fr单位是等分分配列空间 */
  grid-template-columns: 50% 50%;

  .ability-item {
    padding: 5px 0;

    image {
      width: 16px;
      height: 16px;
      margin: 2px 5px 0 0;
    }
  }
}
</style>
